<template>
  <div id="news">
    <div class="wrapper">
      <top-bar></top-bar>
      <top-header></top-header>
      <div class="main">
        <div class="main-banner"
             :style="{backgroundImage: 'url('+ imageUrl +')'}"></div>
        <div class="main-content">
          <h3 style="font-weight: 400;">{{ infoTitle }}</h3>
          <p class="item-date">{{ getTime(createdTime) }}</p>
          <div class="item-img"
               v-html="infoContent"></div>
        </div>
      </div>
    </div>
    <bottom-tab class="bottom-bar"></bottom-tab>
  </div>
</template>

<script>
import topBar from '@/components/top-bar'
import topHead from '@/components/top-head'
import bottomTab from '@/components/bottom-tab'

let CONSTANT = require('../../constant/constant.js')
let common = require('../../common.js')

export default {
  components: {
    'top-bar': topBar,
    'top-header': topHead,
    'bottom-tab': bottomTab
  },
  data() {
    return {
      id: '',
      infoTitle: '',
      createdTime: '',
      infoContent: '',
      imageUrl: null,
      isTop: 'n'
    }
  },
  mounted() {
    this.id = this.$router.currentRoute.query.id
    if (this.id) {
      this.getDetail()
    }
  },
  methods: {
    getTime(time) {
      return time.slice(0, 10)
    },
    getDetail() {
      let url = CONSTANT.URL.INFO.GETINFO
      let data = {
        id: this.id
      }
      common.requestAjax(url, JSON.stringify(data), null, res => {
        this.infoTitle = res.data.bussData.infoTitle
        this.createdTime = res.data.bussData.gmtCreated
        this.infoContent = res.data.bussData.infoContent
        this.imageUrl = res.data.bussData.imageUrl
        this.isTop = res.data.bussData.isTop
      })
    }
  }
}
</script>

<style scoped>
#news {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.wrapper {
  min-height: calc(100vh - 210px);
  padding-bottom: 210px;
  background-color: rgba(245, 245, 245, 1);
}

.main {
  padding-bottom: 60px;
}
.main-banner {
  height: 300px;
  width: 100%;
  /* background: url(../../assets/news_banner.png) no-repeat 100% 100%; */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}
.main-content {
  padding: 40px 130px 30px 70px;
  width: 1000px;
  margin: 20px auto 0;
  background-color: #fff;
}
.main-content h3 {
  text-align: center;
  font-size: 24px;
  line-height: 24px;
}
.main-content .item-date {
  text-align: center;
  font-size: 14px;
  color: rgba(51, 51, 51, 1);
  line-height: 48px;
}
.item-img {
  word-wrap: break-word;
  width: 1000px;
  font-size: 14px;
  line-height: 30px;
  margin-top: 30px;
}
.bottom-bar {
  position: relative;
  left: 0;
  bottom: 0;
  margin-top: -210px;
  clear: both;
}
</style>